<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    // x轴和y轴数据为二维数组
    var data = [{'height': 165, 'wight': 43.1},{'height': 155, 'wight': 41.1},{'height': 160, 'wight': 42},{'height': 175, 'wight': 50.1},{'height': 168, 'wight': 46.1},{'height': 180, 'wight': 60.1},{'height': 177, 'wight': 59.7},{'height': 177, 'wight': 109.7},{'height': 157, 'wight': 100.7}]
    var axisData = []
    data.forEach(item => {
      axisData.push([item.height, item.wight])
    })
    var option = {
      xAxis: {
        type: 'value',
        scale: true // 将坐标轴设置为脱离0值比例
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          // type: 'scatter',
          type: 'effectScatter', // 涟漪动画
          showEffectOn: 'emphasis', //render emphasis
          rippleEffect: {
            scale: 10
          },
          data: axisData,
          // symbolSize: 20
          symbolSize: function(arg) {
            var height = arg[0] / 100
            var weight = arg[1]
            // bmi = 体重kg / (身高m*身高m) 大于28就代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 20
            }
            return 5
          },
          itemStyle: {
            color: function (arg) {
              var height = arg.data[0] / 100
              var weight = arg.data[1]
              // bmi = 体重kg / (身高m*身高m) 大于28就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 'red'
              }
              return 'green'
            }
          }
        },
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>